<template>
  <n-space class="page-user" vertical>
    <div class="header">
      <n-space>
        <n-button type="primary" @click="handleAdd">新增</n-button>
        <n-button>删除</n-button>
        <n-button>导入</n-button>
      </n-space>
    </div>

    <n-data-table :columns="columns" :data="data" />
  </n-space>

  <n-modal
    v-model:show="showAdd"
    preset="dialog"
    title="新增用户"
    :show-icon="false"
    negative-text="取消"
    positive-text="确定"
    @positive-click="positiveClick"
  >
    <n-form ref="addFormRef" :model="addModel" :rules="addRules">
      <n-grid x-gap="12">
        <n-form-item-gi span="12" label="用户名" path="username">
          <n-input v-model:value="addModel.username" />
        </n-form-item-gi>

        <n-form-item-gi span="12" label="密码" path="password">
          <n-input v-model:value="addModel.password" />
        </n-form-item-gi>

        <n-form-item-gi span="12" label="角色">
          <n-select v-model:value="addModel.role" :options="roles" />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-modal>

  <n-modal
    v-model:show="showUpdate"
    preset="dialog"
    title="菜单权限设置"
    :show-icon="false"
    negative-text="取消"
    positive-text="确定"
    @positive-click="handleUpdate"
  >
    <!-- 
      default-checked-keys 与 checked-keys 的区别 （受控组件与非受控组件的区别）

      使用 checked-keys 当前组件就是一个受控组件，组件勾选的数据，完全由数据控制。
      使用 default-checked-keys 当前组件是一个非受控组件，只是设置默认勾选上的数据而已
     -->

    <n-tree
      ref="treeRef"
      :data="treeData"
      :default-checked-keys="editUser.checkedKeys"
      cascade
      key-field="name"
      checkable
      expand-on-click
      default-expand-all
    />
  </n-modal>
</template>

<script>
import { h } from "vue";
import { NButton, NSpace, NTag, NPopconfirm } from "naive-ui";
import { addUser, updateUser, getUserList, delUser } from "@/api/user";

import asyncRoutes from "@/router/routes-async.js";

export default {
  name: "system_user",

  data() {
    return {
      columns: [
        { title: "用户名", key: "adminname" },
        {
          title: "用户角色",
          key: "role",
          render: (row) => {
            return h(
              NTag,
              {
                type: row.role === 1 ? "success" : "default",
              },
              {
                default: () => (row.role === 1 ? "管理员" : "超级管理员"),
              }
            );
          },
        },
        {
          title: "操作",
          render: (row, index) => {
            return h(
              NSpace,
              {},
              {
                default: () => [
                  h(
                    NButton,
                    {
                      type: "primary",
                      onClick: () => {
                        // 1. 将当前用户信息设置给 editUser
                        this.editUser = row;
                        // 2. 将弹窗给打开
                        this.showUpdate = true;
                      },
                    },
                    { default: () => "菜单权限设置" }
                  ),
                  h(
                    NPopconfirm,
                    {
                      onPositiveClick: () => {
                        this.handleDel(row.adminid);
                      },
                    },
                    {
                      default: () => "你确认要删除吗？",
                      trigger: () =>
                        h(
                          NButton,
                          {
                            type: "error",
                            // onClick: () => {
                            //   this.handleDel(row.adminid);
                            // },
                            // onClick: this.handleDel.bind(this, row.adminid),
                          },
                          { default: () => "删除" }
                        ),
                    }
                  ),
                ],
              }
            );
          },
        },
      ],
      data: [],

      // 用于表示新增弹窗是否显示
      showAdd: false,
      // 角色下拉选择项
      roles: [
        { label: "管理员", value: 1 },
        { label: "超级管理员", value: 2 },
      ],
      // 新增用户的表单数据
      addModel: {
        username: "",
        password: "",
        role: 1,
      },
      // 新增用户的表单校验
      addRules: {
        username: [
          { required: true, message: "请输入username", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入password", trigger: "blur" },
        ],
      },

      // 用于表示设置菜单权限弹窗是否显示
      showUpdate: false,
      // treeData
      // treeData: [
      //   {
      //     key: "1",
      //     label: "hello",
      //     children: [{ key: "1-1", label: "hello-1" }],
      //   },
      //   { key: "2", label: "world" },
      // ],
      treeData: asyncRoutes,
      // 当前操作的用户信息
      editUser: null,
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    /**
     * 请求数据
     */
    async fetchData() {
      const response = await getUserList();
      this.data = response.data;
    },

    /**
     * 单个删除
     */
    async handleDel(id) {
      await delUser(id);
      this.$message.success("删除成功");
      this.fetchData();
    },

    /**
     * 新增用户按钮点击
     */
    handleAdd() {
      this.showAdd = true;
    },
    /**
     * 新增Modal中确定按钮点击
     * 校验表单1，用回调函数的方式
     */
    // positiveClick() {
    //   this.$refs.addFormRef.validate((error) => {
    //     if (error) {
    //       console.log("校验失败");
    //       return;
    //     }
    //     console.log("校验成功");
    //   });
    //   return false;
    // },
    /**
     * 新增Modal中确定按钮点击
     * 校验表单2，用 Promise 的方式
     */
    async positiveClick() {
      await this.$refs.addFormRef.validate();
      // 校验通过，就能往下执行
      console.log("校验通过");
      // 调用接口，新增用户
      const response = await addUser({
        adminname: this.addModel.username,
        password: this.addModel.password,
        role: this.addModel.role,
        checkedKeys: [],
      });
      // 新增成功
      this.$message.success("新增成功");
      this.fetchData();
    },

    /**
     * 菜单权限设置确认
     */
    async handleUpdate() {
      // 1. 获取勾选的数据
      const { keys: key1 } = this.$refs.treeRef.getCheckedData();
      // const { keys: key2 } = this.$refs.treeRef.getIndeterminateData();
      // 拼接 key1 与 key2
      const keys = [...key1];
      console.log("keys", keys);

      // 2. 调用接口
      await updateUser({
        adminname: this.editUser.adminname,
        role: this.editUser.role,
        checkedKeys: keys,
      });

      // 3. 修改成功
      this.$message.success("修改成功");

      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page-user {
  padding: 8px;
  background-color: #fff;
}
</style>
